<template>
    <div class="homebox">
        <div class="swipper">
            <el-carousel :interval="4000" type="card" height="2rem">
                <el-carousel-item v-for="item in swipperlist" :key="item.id">
                    <!-- <img style="width: 100%;height: 100%;" :src="item.url" alt=""> -->
                    <el-image style="width: 100%;height: 100%;" :src="item.url" fit="fill" :lazy="true"></el-image>


                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="other" @scroll="scool" ref="scrol" v-show="detail">
            <div class="item" v-for="it in datalist" :key="it._id">

                <el-card shadow="always" sty>
                    <template #header>
                        <div style="display: flex;align-items: center;">
                            <img :src="it.user_id ? it.user_id.avatar : ''"
                                style="width: .6667rem;height:.6667rem;border-radius: 100%;" alt="">
                            <span style="margin-left: .1333rem;font-size: .2667rem;">{{ it.user_id ?
                                it.user_id.nickname : '' }}</span>
                        </div>
                    </template>
                    <div style="font-size:.2667rem;font-family: 'YouYuan';margin-bottom: .2667rem;">{{ it.concent }}</div>
                    <div style="font-size:0.266rem;font-family: '楷体';">共{{ it.imgurl.length }}张</div>
                    <el-image @click="detaile(it.imgurl)" style="height: 2.1333rem;width:2.6333rem;" :src="it.imgurl[0]"
                        fit="fill" :lazy="true"></el-image>
                    <div @click.stop="like(it._id, it.likearticl)"
                        style="display: flex;align-items: center;font-size: .2667rem;justify-content: center;margin-top: .1333rem;">
                        <svg class="icon" aria-hidden="true">
                            <use
                                :xlink:href="it.likearticl.indexOf(GetCurrentUserId()) != -1 ? '#icon-like' : '#icon-like1'">
                            </use>
                        </svg>
                        <span>{{ it.likearticl.length }}</span>
                    </div>
                </el-card>

            </div>
            <div class="loding" v-show="islodaing">加载中</div>
        </div>
        <div class="imglist" v-if="!detail">

            <el-image style="height: 2.1333rem;width:2.6333rem;" :preview-src-list="detaillist" :initial-index="index"
                :src="item" v-for="(item, index) in detaillist" :key="index"></el-image>
            <div class="closes" @click="detail = true">
                <el-icon size="0.4rem" color="#eee">
                    <CloseBold />
                </el-icon>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { articleHome, searchone, articlelike } from '@/api/articl';
import { GetCurrentUserId } from '@/utils/GetCurrentUserId';
import { ElMessage } from 'element-plus';
import { CloseBold } from '@element-plus/icons-vue'
name: 'HOMES'
let detaillist = ref([])
let detail = ref(true)
let props = defineProps({
    switchtabid: {
        type: Number,
        default: 0
    },
    ids: {
        type: String,
        default: ''
    }
})
let islodaing = ref(false)
let skep = ref<number>(0)
let scrol = ref()
let swipperlist = reactive<any>([{
    url: 'src/assets/avator/avatar.png',
    id: 0,
},
{
    url: 'src/assets/avator/gs3.jpg',
    id: 1
}, {
    url: 'src/assets/login_bg2.jpg',
    id: 2
}])

let datalist = ref<any>([])
watch(() => props.switchtabid, () => {
    console.log(props.switchtabid)
    skep.value = 0
    datalist.value = []
    articleHome(skep.value, props.switchtabid).then(res => {
        datalist.value = res.data
        console.log(datalist.value, '....')
    })
})
watch(() => props.ids, () => {
    console.log(props.ids)
    searchone(props.ids).then(res => {
        console.log(res)
        datalist.value = [res.data]
    })
})
onMounted(() => {
    getlist()
})
const getlist = async () => {
    articleHome(skep.value).then(res => {
        console.log(res)
        datalist.value = res.data
        console.log(datalist.value, '....')

    })
}
const like = (id: string, likearticl: any) => {
    if (likearticl.indexOf(GetCurrentUserId()) == -1) {
        likearticl.push(GetCurrentUserId())
        console.log(likearticl.indexOf(GetCurrentUserId()))
        let data = {
            id,
            likearticl
        }
        articlelike(data).then(res => {
            console.log(res)
        }).catch(err => {
            ElMessage({
                message: '登录已过期',
                type: 'error'
            })
            console.log(err)
        })
        console.log('点')
    } else {
        likearticl.splice(likearticl.indexOf(GetCurrentUserId()), 1)
        let data = {
            id,
            likearticl
        }
        articlelike(data).then(res => {
            console.log(res)
        }).catch(err => {
            ElMessage({
                message: '登录已过期',
                type: 'error'
            })
            console.log(err)
        })
        console.log('不点')
    }
}
const scool = (e: any) => {

    // console.log(e.target.scrollTop, '11')
    // console.log(e)
    let scrollHeigth = e.target.scrollHeight
    let scrollTop = e.target.scrollTop
    let clientHeight = e.target.clientHeight
    console.log(scrollHeigth, clientHeight, scrollTop)
    if (clientHeight + Math.ceil(scrollTop) == scrollHeigth) {
        islodaing.value = true
        skep.value = skep.value + 9
        articleHome(skep.value, props.switchtabid).then(res => {
            let oldarr = datalist.value
            if (datalist.value.length == 0) {
                ElMessage({
                    message: "没有更多了",
                    type: 'info'
                })
            }
            // @ts-ignore
            datalist.value = [...oldarr, ...res.data]
            islodaing.value = false
        }).catch(err => {
            console.log(err)
        })
        console.log("到底了")

    }
}
const detaile = (list: any) => {
    detail.value = false
    detaillist.value = list
    console.log("给Fred热量低精灵附件", list)
}
</script>

<style lang="scss" scoped>
.homebox {
    width: 100%;

    .swipper {
        margin-top: .1333rem;

        .el-carousel__item h3 {
            color: #475669;
            opacity: 0.75;
            line-height: 2.6667rem;
            margin: 0;
            text-align: center;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
            background-color: #d3dce6;
        }
    }

    .other::-webkit-scrollbar {
        // width: 5px;
        width: 1px;
    }

    // .other::-webkit-scrollbar-button {
    //     // display: none;
    //     color: red;
    // }
    .imglist {
        position: relative;
        margin-top: 0.1333rem;
        height: 6.9rem;
        display: flex;
        flex-wrap: wrap;

        .closes {
            position: absolute;
            top: 0;
            right: 0
        }

        .el-image {
            width: 23%;
            margin-right: 0.0533rem;

        }

    }

    .other {

        padding-top: 0.1333rem;
        overflow: scroll;
        display: flex;
        flex-wrap: wrap;
        border-right: 1px solid black;
        overflow-x: hidden;
        height: 6.9rem;

        // : :-webkit-scrollbar-button:no-button;

        .loding {
            font-size: 0.3rem;
            position: fixed;
            bottom: 0;
            right: 50%;
        }

        .item {
            margin: 0 .1667rem;
            padding-top: .1333rem;
            width: 30%;
        }
    }
}
</style>